<template>
  <div style="" class="overflowY">
    <div class="searchGroup_list" style="padding: 0px 0px 10px 0px;margin: 0px 0px 0px 0px;">
      <el-row :gutter="20">
        <el-col :sm="10" :xl="10">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="5">
                <span class="searchListName">流程分类:</span>
              </el-col>
              <el-col :span="18">
                <el-input size="small" v-model="queryCondition.procCategoryName" placeholder="请输入流程分类"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :sm="12" :xl="12">
          <div class="searchBoxList">
            <el-row>
              <el-col :span="4">
                <span class="searchListName">流程名称: </span>
              </el-col>
              <el-col :span="20">
                <el-input size="small" v-model="queryCondition.procName" placeholder="请输入流程名称"></el-input>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :sm="12" :xl="12">
          <div style="display: inline-block;text-align: left;width: 100%;padding-top: 11px;">
            <el-button type="success" size="mini" icon="el-icon-setting" @click="addRecord">添加</el-button>
          </div>
        </el-col>
        <el-col :sm="12" :xl="12">
          <div style="display: inline-block;text-align: right;width: 100%;padding-top: 11px;padding-right: 5px;">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="fetchData">搜索</el-button>
            <el-button type="info" size="mini" icon="el-icon-close"  @click="closePage">关闭</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="position: relative;border: 1px solid #ccc;padding:0px 0px 54px 0px;margin:0px 0px 0px 0px;position: relative;">
      <el-table
        ref="singleTable"
        :data="tableData"
        tooltip-effect="dark"
        @row-contextmenu="rowContextmenu"
        @cell-dblclick="cellClick"
        @row-click="rowClick"
        @sort-change="sortChange"
        @current-change="handleCurrentChange"
        highlight-current-row
        height="300"
        style="width: 100%">
        <el-table-column
          width="50"
          align="center"
          label="序号">
          <template slot-scope="scope">
            <span>{{scope.$index + (pagingArgs.currentPageNo - 1) * 10 + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          prop="procCategoryName"
          align="center"
          sortable="custom"
          :show-overflow-tooltip="showOverflowTooltip"
          label="流程分类">
        </el-table-column>
        <el-table-column
          width="200"
          prop="procName"
          align="left"
          sortable="custom"
          :show-overflow-tooltip="showOverflowTooltip"
          label="流程名称">
        </el-table-column>
        <el-table-column
          width="280"
          prop="procId"
          align="left"
          :show-overflow-tooltip="showOverflowTooltip"
          label="流程ID">
        </el-table-column>
        <el-table-column
          width="120"
          prop="procVersion"
          align="center"
          label="激活版本">
        </el-table-column>
        <el-table-column
          width="150"
          prop="displayDate"
          align="center"
          label="最后修改时间">
        </el-table-column>
      </el-table>
      <div style="position: absolute;bottom:0;left: 10px;">
        <paging :size-change="pageSizeChange"
                :current-change="pagingQuery"
                :page-sizes="pageSizes"
                :total-num="pagingArgs.totalCount">
        </paging>
      </div>
    </div>
  </div>
</template>

<script>
import paging from '@/components/demoAssembly/paging' // 分页

export default {
  name: 'busiTypeProcessAll',
  data() {
    return {
      pageSizes: [10, 20, 30, 40],
      // 分页参数
      pagingArgs: {
        currentPageNo: 1,
        totalCount: 0
      },
      showOverflowTooltip: true,
      tableData: [], // 列表数据
      queryArgs: {
        sort: [
          {
            property: 'procCategoryName',
            direction: 'ASC'
          },
          {
            property: 'procName',
            direction: 'ASC'
          }
        ],
        rowBounds: {
          offset: 0,
          limit: 10
        }
      }, // 查询参数
      queryCondition: {
        procCategoryName: '',
        procName: ''
      },
      selectRecord: {}
    }
  },
  props: ['dialogRefreshProp', 'busiTypeDialog'],
  watch: {
    dialogRefreshProp() { // 普通的watch监听通的watch监听
      this.fetchData()
    }
  },
  computed: {

  },
  filters: {

  },
  components: {
    paging
  },
  /**
   * 组件创建完成后，查询列表数据
   */
  created() {

  },
  mounted() {
    this.fetchData()
  },
  methods: {
    rowClick() {
      // 行单击事件
    },
    cellClick(row, column, cell, event) {
      // 列单击事件
    },
    rowContextmenu(row, column, e) {
      // 右键菜单
      window.event.returnValue = false
    },
    pageSizeChange(val) {
      this.queryArgs.rowBounds.limit = val
      this.queryArgs.rowBounds.offset = 0
      this.pagingArgs.currentPageNo = 1
      this.fetchData()
    },
    sortChange(col) {
      //
      if (col.prop) {
        let tempDirection = 'ASC'
        if (col.order === 'descending') {
          tempDirection = 'DESC'
        }
        const sort = {
          property: col.prop,
          direction: tempDirection
        }
        this.queryArgs.sort = []
        this.queryArgs.sort.push(sort)
        this.fetchData()
      }
    },
    pagingQuery(val) { // 分页
      this.queryArgs.rowBounds.offset = (val - 1) * 10
      this.pagingArgs.currentPageNo = val
      this.fetchData()
    },
    buildQueryConditions() {
      let tempQueryCondition = []

      const queryIsActiveVersion = {
        property: 'isActiveVersion',
        value: 1,
        type: 'EQ'
      }

      tempQueryCondition.push(queryIsActiveVersion)

      // 流程分类
      if (this.queryCondition.procCategoryName != null && this.queryCondition.procCategoryName !== '') {
        const queryProcCategoryName = {
          property: 'procCategoryName',
          value: this.queryCondition.procCategoryName,
          type: 'LIKE'
        }
        tempQueryCondition.push(queryProcCategoryName)
      }

      // 流程名称
      if (this.queryCondition.procName != null && this.queryCondition.procName !== '') {
        const queryProcName = {
          property: 'procName',
          value: this.queryCondition.procName,
          type: 'LIKE'
        }
        tempQueryCondition.push(queryProcName)
      }

      return tempQueryCondition
    },
    fetchData() { // 获取内容
      this.queryArgs.condition = this.buildQueryConditions()
      this.$store
        .dispatch('WfProcessSelect', this.queryArgs)
        .then(res => {
          let records = res.data.records
          if (records) {
            records.forEach((item, index) => {
              // 格式化时间
              if (item.modifiedTime) {
                item.displayDate = this.timeFormat(item.modifiedTime)
              } else {
                item.displayDate = this.timeFormat(item.buildTime)
              }

            })
          }
          this.tableData = records
          this.pagingArgs.totalCount = res.data.count

          this.selectRecord = {}
        })
        .catch(() => {

        })
    },
    timeFormat(time) {
      let tempDate = time
      try {
        if (time && time.length > 8) {
          tempDate = time.substring(0, 4) + '-' + time.substring(4, 6) + '-' + time.substring(6, 8)
          tempDate = tempDate + ' ' + time.substring(8, 10) + ':' + time.substring(10, 12) + ':' + time.substring(12, 14)
        }
      } catch (e) {
        //
        console.info(e)
      }
      return tempDate
    },
    handleCurrentChange(currentRow, oldCurrentRow) {
      //
      this.selectRecord = currentRow
    },
    addRecord() {
      //
      let curpProcId = ''
      if (this.selectRecord) {
        curpProcId = this.selectRecord.procId
      }
      if (!curpProcId) {
        this.$message({
          type: 'warning',
          message: '请选择流程!'
        })
        return
      }
      let args = {}
      args.busiTypeId = this.busiTypeDialog.busiTypeId
      args.orgId = this.busiTypeDialog.orgId
      args.procId = this.selectRecord.procId
      this.$store.dispatch('WfBusiTypeProcessInsert', args).then(res => {
        this.$emit('listRefresh')
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    closePage() {
      this.$emit('setDialogDisplay')
    }

  }
}
</script>
<style scoped>
  .tree-title{
    font-size: 16px;
    padding:10px 10px 10px 20px;
    border-bottom: 1px solid #ccc;
  }
  /*.size{*/
  /*  padding:4px;*/
  /*}*/
  .tree-detail{
    padding: 10px 0 80px 15px;
  }
  .notSize .el-table__empty-text{
    display: none;
  }
  .tableBtnBox >>> .el-button.is-circle{
    padding: 8px !important;
  }

</style>

